<template>
  <div class="image-input">
    <file-input class="form-image" @choose="chooseFile">
      <div v-if="source === null" class="form-no-image">
        <p>请将图片拖至这里，或点击此处。</p>
        <p>如果此题不要图片，请忽略。</p>
      </div>
      <div v-else class="form-has-image">
        <img :src="sourceUrl" alt="题目图片" class="form-img">
        <mu-button icon color="error" class="form-remove-image" @click.stop="removeImage()">
          <mu-icon value="delete"></mu-icon>
        </mu-button>
      </div>
    </file-input>
    <div v-show="showClip" class="form-clip">
      <img ref="cropperImg" :src="sourceUrl" alt="题目图片" class="form-clip-img">
      <mu-alert v-if="showWarning" color="warning" class="form-clip-warning">
        竖屏图像在比赛时会看不清的哦？
      </mu-alert>
      <div class="form-clip-actions">
        <mu-button class="form-clip-action" color="orange" @click="resetCropper()">重置</mu-button>
        <mu-button class="form-clip-action" color="primary" @click="clipCropper()">剪裁</mu-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import FileInput from '@/components/FileInput'
import { buildCropper } from '@/mixins'

export default {
  name: 'ImageInput',
  components: {
    FileInput
  },
  mixins: [
    buildCropper({
      ref: 'cropperImg',
      enable: 'showClip',
      scope: 'cropper',
      maxWidth: 512,
      maxHeight: 340,
      initRate: 512 / 288
    })
  ],
  props: {
    // eslint-disable-next-line
    value: {
      required: true // 这个参数输入被忽略了，不应当允许文件输入
    }
  },
  data() {
    return {
      source: null,
      cropper: {
        cropper: null,
        width: 0,
        height: 0,
        result: null
      }
    }
  },
  computed: {
    ...mapGetters({
      qcConfig: 'questionCreateConfig'
    }),
    showClip() {
      return this.qcConfig.clip === 'manual' && this.source
    },
    sourceUrl() {
      return this.source ? URL.createObjectURL(this.source) : null
    },
    showWarning() {
      return (this.cropper.width / this.cropper.height) <= (512 / 340)
    },
    result() {
      return this.showClip ? this.cropper.result : this.source
    }
  },
  watch: {
    showClip() {
      this.destroyCropperWrapper()
      this.initializeCropperWrapper()
    },
    result(val) {
      this.$emit('input', val)
    }
  },
  mounted() {
    this.initializeCropperWrapper()
  },
  beforeDestroy() {
    this.destroyCropperWrapper()
  },
  methods: {
    // 图片区，选择文件
    chooseFile(file) {
      const { name, size } = file
      if (!(/\.(png|jpg|jpeg)$/.test(name))) {
        this.$toast.error('必须是png或jpg格式的图片')
      } else if (size > 1 * 1024 * 1024) {
        this.$toast.error('文件太大，不能上传超过1MB的文件哦')
      } else {
        this.source = file
      }
    },
    // 删除图片
    removeImage() {
      this.source = null
    }
  }
}
</script>

<style scoped>
/* .image-input {
  padding: 12px;
} */
.form-image {
  margin: 6px auto;
}
.form-no-image {
  padding: 12px;
  text-align: center;
}
.form-has-image {
  position: relative;
  display: flex;
}
.form-img {
  width: 300px;
  height: 200px;
  object-fit: contain;
}
.form-clip {
  padding: 0 8px;
}
.form-clip-img {
  width: 100%;
  max-height: 600px;
}
.form-remove-image {
  position: absolute;
  top: 6px;
  right: 6px;
}
.form-clip-warning {
  margin: 12px 0;
}
.form-clip-actions {
  display: flex;
}
.form-clip-action {
  margin: 6px 3px 3px;
  width: calc(50% - 6px);
}
</style>
